@extends('layout.app')

@section('title', 'Form Event')

{{--@section('sidebar')
    @parent
    <p>this text is append to sidebar</p>
@endsection--}}

@section('content')
<div class="container">
    <div class="card d-flex mt-3">
        <div class="card-header m-lg-0">
            <div class="card-title">Iteration</div>
        </div>
        <div class="card-body" id="element-article">
            @verbatim
            <div
                class="border-bottom border-info form-group"
                 :style="{ fontSize: fontSize + 'em' }">
                <article-show
                    v-on:enlarge-text='fontSize += 0.1;'
                    v-on:minify-text="fontSize -= 0.1;"
                    :article="article"
                    :class-list="classNames"></article-show>
            </div>
                {{fontSize}}
            @endverbatim
            <alert-slot>
                Something bad.
            </alert-slot>
        </div>
    </div>
</div>

<script>
    Vue.component('option-item', {
        props:['option'],
        template: "<option :value='option.value'>@{{option.name}}</option>"
    });
    Vue.component('alert-slot', {
        template: "<div class='alert-danger p-3'>" +
                "<strong>Error!</strong>" +
                "<slot><span></span></slot>" +
            "</div>"
    });

    Vue.component('article-show', {
        props:['article', 'classList'],
            template: "<article class='p-3'>" +
            "<h3><span>@{{article.title}}</span>" +
                "<a v-if='$parent.fontSize <=2' href='#' v-on:click.prevent='$emit(\"enlarge-text\")'>Enlarge text</a>" +
                "<a v-if='$parent.fontSize >1' href='#' v-on:click.prevent='$emit(\"minify-text\")'>Minify text</a></h3>" +
            "</h3>" +
            "<p>@{{ $parent.fontSize }}</p>" +
            "<div :style='{ fontSize: $parent.fontSize + \"em\" }'" +
                ":class='$parent.aClass'>@{{article.content}}</div>" +
            "<div class='action'>" +
                "<a class='pt-2 pb-2' href='/essence/iteration'>Back to list</a>"
                + "<span>Text Color:</span>" +
                "<select v-model='$root.aClass'>" +
                    "<option-item " +
                        //"v-bind='option' " +
                        "v-for='(option, key) in classList' " +
                        ":option='option'" +
                        ":key='key'></option-item>" +
                "</select>"
            + "</div>"
            + "</article>"
    });
    new Vue({
        el: "#element-article",
        data: {
            aClass: "text-danger",
            fontSize: 1,
            classNames: [
                {name: "Danger", value: "text-danger"},
                {name: "Yellow", value: "text-warning"},
                {name: "Blue: ", value: "text-primary"},
                {name: "Dark", value: "text-default"},
            ],
            article: ""
        },
        methods: {
            en: function() {
                this.fontSize += 0.1;
            }
        },
        created: function() {

            var vm = this;
            $.ajax({
                url: "/ajax" + location.pathname,
                type: "POST",
                success: function(data) {
                    vm._data.article = data;
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="s_token"]').attr('content')
                }
            });
        }
    })
</script>

@endsection


